<script setup>
import {ref} from "vue";
import {onLoad} from "@dcloudio/uni-app";
import {getCancelAPI} from "../../services/share";
import {BaseImgUrl} from "../../utils/lshttp";
import {useCommonInfoStore} from "../../stores/modules/commonInfo";

const commonInfoStore = useCommonInfoStore()
const qrData = ref()
const city = ref("贵阳市")
onLoad(async () => {
  const res = await getCancelAPI(commonInfoStore?.addressDel?.city)
  qrData.value = res.result
  city.value = commonInfoStore?.addressDel?.city
})

</script>
<template>
  <view>
    <u-navbar
        title="领食福利群"
        placeholder
        titleStyle="color:black"
        leftIconColor="#000"
        auto-back
    >
    </u-navbar>
    <view class="poage_wrap">
      <view class="top_bg">
        <view class="dignwei">
          <view class="weizhi" @click="TopageUrl()">
            <u-icon name="map" color="#ffffff" size="22"></u-icon>
            {{ city }}
          </view>
          <!--          <view class="ref_btn" @click="chognxin()">重新定位</view>-->
        </view>
        <view class="title1">领食周边购内部群</view>
        <view class="title2">限量
          <text>200</text>
          人，优惠资讯提前知
        </view>
      </view>
      <view class="content_box">
        <view class="shops-info">
          <view class="shops-title" style="text-align: center;">
            <image :src="BaseImgUrl + '/home/qunicon.png'"></image>
            <view class="true_title">{{ qrData.name }}</view>
          </view>
          <view class="erweima">
            <image :src="qrData.qr_code" mode="widthFix" show-menu-by-longpress></image>
            <view>长按保存二维码图片</view>
          </view>
        </view>

        <view class="shops-info">
          <view class="shop-info-shhuom">
            <view>
              <view class="shops-title">第一步
                <text></text>
              </view>
              <view>截屏保存群码二维码并打开微信</view>
            </view>
            <image :src="qrData.qr_code" mode="widthFix"></image>
          </view>
        </view>

        <view class="shops-info">
          <view class="shop-info-shhuom">
            <view>
              <view class="shops-title">第二步
                <text></text>
              </view>
              <view>微信右上角点击扫一扫，选择已保存的二维码</view>
            </view>
          </view>
          <view class="erbumia">
            <image :src="BaseImgUrl + '/images/stup101.png'"></image>
            <view style="width:40rpx;"></view>
            <image :src="BaseImgUrl + '/images/stup102.png'"></image>
          </view>
        </view>

        <view class="shops-info">
          <view class="disanbu_box">
            <text></text>
            <view>社群专享福利群</view>
            <text></text>
          </view>
          <view class="erbumia3Wrap">
            <view class="erbumia3">
              <image :src="BaseImgUrl + '/images/stup103.png'" mode="widthFix"></image>
              <view>群内专属券包</view>
            </view>
            <view class="erbumia3">
              <image :src="BaseImgUrl + '/images/stup104.png'" mode="widthFix"></image>
              <view>优质霸王餐推荐</view>
            </view>
            <view class="erbumia3">
              <image :src="BaseImgUrl + '/images/stup105.png'" mode="widthFix"></image>
              <view>优惠资讯提前知</view>
            </view>
          </view>
        </view>

      </view>
    </view>

  </view>
</template>
<style lang="scss">
page {
  background-image: linear-gradient(to bottom, #FEE7BE, #F1F1F1) !important;
}

.u-status-bar,
.u-navbar__content {
  background-image: linear-gradient(90deg, #FECE37, #FECE37);
}
</style>
<style lang="scss" scoped>
.poage_wrap {
  .top_bg {
    width: 100%;
    background-image: linear-gradient(to bottom, #FECE37, #FECC34) !important;
    height: 560rpx;
    border-radius: 0 0 100rpx 100rpx;
    padding: 30rpx;

    .dignwei {
      display: flex;
      align-items: center;

      .weizhi {
        display: flex;
        align-items: center;
        font-size: 34rpx;
        color: #fff;
      }

      .ref_btn {
        margin-left: auto;
        font-size: 34rpx;
        color: #fff;
      }
    }

    .title1 {
      font-size: 22px;
      font-weight: bold;
      color: #fff;
      margin-top: 28px;
    }

    .title2 {
      font-size: 14px;
      font-weight: bold;
      color: #fff;
      margin-top: 8px;

      text {
        color: #f00
      }
    }
  }

  .content_box {
    padding: 30rpx;
    position: relative;
    top: -240rpx;

    .liest_task {
      background-color: #ffffff;
      border-radius: 20rpx;
      padding: 0 30rpx;
      margin-top: 30rpx;

      .dh_title {
        padding: 30rpx 0 30rpx 0;
        border-bottom: 1px solid #f1f1f1;
      }

      .tz_list {

        .tz_list_item {
          display: flex;
          align-items: center;
          border-bottom: 1px solid #f1f1f1;
          padding: 30rpx 0;

          image {
            width: 110rpx;
            height: 110rpx;
            margin-right: 30rpx;
          }

          .tz_item_info {
            flex: 1;

            .tz_title {
              display: flex;
              align-items: center;
              justify-content: space-between;

              view {
                font-weight: bold;
                font-size: 30rpx;
                margin-bottom: 14rpx;
                word-break: break-all;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
                overflow: hidden;
              }
            }

            .tz_content {
              font-size: 28rpx;
              color: #FAA425;
              word-break: break-all;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }
          }

          .btm {
            border-radius: 200rpx;
            padding: 14rpx 40rpx;
            background-image: linear-gradient(to left, #FA0020, #FF823C) !important;
            color: #fff;
            font-size: 28rpx;
          }
        }

        .tz_list_item:last-child {
          border: none;
        }
      }
    }

    .sign_biao {
      background-color: #ffffff;
      border-radius: 20rpx;
      padding: 30rpx;

      .sign_title {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tishi {
          text {
            color: #FF4910;
            font-weight: bold;
            font-size: 38rpx;
          }
        }

        .kaiguan {
        }
      }

      .sign_list {
        overflow: hidden;
        padding: 30rpx 0 0 0;

        .s_list_item {
          text-align: center;
          float: left;
          width: 13.45%;
          height: 150rpx;
          margin: 0 5px;

          .s_item_box {
            width: 88rpx;
            height: 88rpx;
            border-radius: 200rpx;
            background-color: #fdeccd;
            text-align: center;
            padding-top: 20rpx;
            color: #FF4910;

            .jl_price {
              font-size: 24rpx;
            }

            image {
              width: 40rpx;
            }
          }

          .morenbgc {
            background-color: #f8f6f7 !important;
            color: #999999 !important;
          }

          .s_riqi {
            text-align: center;
            height: 30rpx;
            margin-top: 10rpx;
            font-size: 26rpx;
          }

          .s_riqisz {
            color: #FF4910;
          }
        }
      }
    }
  }
}

.shops-info {
  background-color: #FFFFFF;
  padding: 35rpx;
  border-radius: 16rpx;
  margin-bottom: 40rpx;

  .disanbu_box {
    display: flex;
    align-items: center;
    justify-content: center;

    text {
      display: inline-block;
      background-image: linear-gradient(to left, #F8F8F8, #F97632) !important;
      width: 62px;
      height: 7px;
      border-radius: 100px;
    }

    view {
      margin: 0 30rpx;
      font-size: 34rpx;
      font-weight: bold;
    }
  }

  .erbumia3Wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 30rpx;

    .erbumia3 {
      text-align: center;
      font-weight: bold;
      font-size: 26rpx;

      image {
        width: 150rpx;
      }
    }
  }


  .shops-title {
    font-weight: bold;
    font-size: 34rpx;
    margin: 0 0 25px 0;
    position: relative;
    display: flex;
    align-items: center;

    image {
      width: 100rpx;
      height: 100rpx;
    }

    .true_title {
      padding-left: 16rpx;
    }

    text {
      display: inline-block;
      background-image: linear-gradient(to left, #F8F8F8, #F97632) !important;
      width: 62px;
      height: 7px;
      border-radius: 100px;
      position: absolute;
      left: 0;
      bottom: -8px;
    }
  }

  .shop-info-shhuom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    image {
      width: 200rpx;
      height: 200rpx;
    }
  }

  .erbumia {
    margin-top: 30rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    image {
      flex: 1;
      height: 210rpx;

    }
  }

  .erweima {
    text-align: center;
    font-weight: bold;
    font-size: 30rpx;

    image {
      width: 450rpx;
      height: 450rpx;
    }
  }
}
</style>
